<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Введение | Vue.js</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link href="static/css/css.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="manifest" href="https://v3.ru.vuejs.org/manifest.json">
    <link rel="apple-touch-icon" href="https://v3.ru.vuejs.org/images/icons/apple-icon-152x152.png">
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script src="static/js/72160148.js" defer="defer"></script>
    <meta name="description" content="Vue.js - Прогрессивный JavaScript-фреймворк">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="static/css/0.styles.8c5eb347.css" as="style"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/app.643be286.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/9.270210be.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/263.487b0881.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/22.f42d5bc7.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/23.3d2d7576.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/13.5a494ddf.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/17.bd0eb4b2.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/16.7677328c.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/20.aee666d2.js" as="script"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/1.e507ea88.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/10.ebd791f9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/100.3fcc5610.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/101.13861a0f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/102.76ce38ef.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/103.8c0de3bb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/104.394d0e6d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/105.bf3193f5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/106.c1bc5b46.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/107.22afceb9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/108.90982ea5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/109.40cc849d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/11.7bc08674.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/110.a43cd061.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/111.85f3d3e3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/112.9862105b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/113.0c4a5917.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/114.ae29effa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/115.17794186.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/116.c9af58df.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/117.25793ff1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/118.23bf516a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/119.61c37e94.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/12.7c79dcf8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/120.39c7e423.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/121.6e1b8f24.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/122.d8807d82.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/123.8e107dff.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/124.3de55d18.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/125.e26a21b7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/126.af88dbbd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/127.e2202fdc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/128.2e1eaff0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/129.b34e550f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/130.c16d50b0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/131.ae3061c4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/132.477f12cd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/133.4ee65cfc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/134.1f849e32.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/135.ed166cfb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/136.f3a7c917.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/137.28242687.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/138.83165a3e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/139.45312b89.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/14.9fd5a46a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/140.ba1cc7e2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/141.27390e2f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/142.607b1b12.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/143.a7bcce6a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/144.8bdcada7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/145.430cbb5f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/146.b6b98fc6.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/147.622dd2e7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/148.983be479.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/149.04dbbbbe.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/15.749c2e37.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/150.c4a6113c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/151.c695ed45.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/152.9c7eec1e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/153.6cfad170.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/154.1e99eb42.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/155.e61c05a8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/156.4bf05c6a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/157.6d8f9ddf.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/158.e8b3485b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/159.276b3a63.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/160.e7da91af.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/161.8e7827b1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/162.e0c77298.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/163.55367233.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/164.f81c71d4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/165.86e676df.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/166.c1e87ed8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/167.e003ad14.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/168.4740e256.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/169.7bbc0d46.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/170.8cabc8b7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/171.83fc533d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/172.6b181db0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/173.5f5d8101.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/174.c7e1907b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/175.e4d4f239.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/176.15d8df67.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/177.f08502d1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/178.1c0d1767.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/179.fe1eb441.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/18.d969e648.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/180.4c8d5673.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/181.6d38cebd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/182.2b3ccc62.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/183.2e51b42b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/184.71bfad0f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/185.09444ce2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/186.b46647b3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/187.4d9ea707.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/188.2157c841.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/189.b5910624.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/19.4c161ba3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/190.cb994d54.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/191.73b72cec.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/192.f46c7b24.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/193.3eec7887.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/194.b050a9d9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/195.175ccde5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/196.3965c176.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/197.fdcc0456.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/198.d02e3bfc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/199.c4da5f12.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/2.68d2431a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/200.573e7138.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/201.58bb6332.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/202.8d1fe5ce.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/203.fdf4e4d2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/204.cb55c59b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/205.cac1c78d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/206.9e080ed7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/207.4e392d8a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/208.7cc1467e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/209.9356ccf1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/21.0695fc83.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/210.f026da8f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/211.03ae6885.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/212.67ddb827.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/213.59cbb78a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/214.07c869cd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/215.7fa931b4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/216.616135da.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/217.6a87d730.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/218.0e18a516.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/219.d5bf54f1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/220.29b4633a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/221.30ac3717.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/222.03525bac.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/223.36988f2a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/224.d6c3e984.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/225.3776a412.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/226.6ec7ae1a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/227.7f9e55ed.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/228.b1704d0f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/229.43aaaa72.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/230.c8e817b2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/231.df65fefa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/232.369fa903.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/233.2ab149ba.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/234.09ad9166.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/235.4ef61a46.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/236.b2672a4c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/237.a5248c94.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/238.c72bcff0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/239.a77f782d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/24.cc902a7a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/240.0f062ef5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/241.e9a2bc53.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/242.14e18c2b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/243.62abc295.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/244.87290b83.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/245.ae7218e9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/246.524e394f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/247.af90b65a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/248.9a42de5b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/249.e27e4b3e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/25.239356cf.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/250.b0ddca6d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/251.a10d7cac.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/252.cf19a4d3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/253.1d9c6bf8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/254.495e88d4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/255.ed174076.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/256.8e4ec162.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/257.627a2b90.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/258.54931a31.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/259.4939312b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/26.f1f16fe7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/260.c9896279.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/261.0288a200.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/262.0c7857a0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/264.b224dabd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/265.10e2e9fa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/266.015d92d3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/267.06ae937e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/268.1e001d98.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/269.9a641151.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/27.41902b88.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/270.d5d2bb52.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/271.28e50c98.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/272.a134c155.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/273.f453e8ff.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/274.d053c4da.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/275.4d2c5ad5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/276.66373b99.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/277.7097fc68.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/278.c0fb24d5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/279.e165f433.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/28.7caf479d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/280.812493a8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/281.d362a9be.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/282.774e7138.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/283.9aea5606.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/284.01b2b0cb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/285.2180626a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/286.45a48b83.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/287.8d815523.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/288.36d84459.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/289.81011f32.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/29.2b30d85a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/290.75b8049c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/291.974e10d2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/292.7f2151e4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/293.f03519e9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/294.199acbb2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/295.c7daf40f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/296.caffc050.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/297.9d79fb29.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/298.4dcb84eb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/299.5e426c37.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/3.455aa85e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/30.b1b83425.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/300.fcfa98b1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/301.0ebf87f4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/302.136dd23a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/303.ebafeef4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/304.23903942.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/305.52d3b622.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/306.8772d7bb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/307.a8e91707.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/308.b775f889.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/309.76e54f23.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/31.a05b9d5a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/310.549009ca.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/311.dc420c15.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/312.932576c8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/313.ad31234d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/314.b99e75bd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/315.db124df2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/316.a8971429.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/317.1aa3d342.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/318.77f9491b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/319.dc783cf9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/32.6f30c60e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/320.ef02e854.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/321.0b14ac0c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/322.40a1d022.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/323.72f24bef.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/324.40ad516c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/325.9d308433.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/326.a536fdae.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/327.63b5c525.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/328.596588a5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/329.66750c33.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/33.0a6a005e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/330.f4b316fd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/331.e7a9fb45.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/332.b2013c15.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/333.27bc1e79.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/334.6e83939d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/335.cdf8f1ff.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/34.9589f582.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/35.5e4540eb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/36.4dbe02ea.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/37.b9262b74.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/38.68c60dfd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/39.c942130a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/4.b8e11b69.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/40.ae01d7e3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/41.cff92131.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/42.dc77344b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/43.358825e3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/44.c159f3f1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/45.64e83240.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/46.6c402a48.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/47.5cdba73b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/48.cb875b8a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/49.7cf47462.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/5.2ae5cdce.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/50.93028c6d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/51.867f50d8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/52.8e77d1ce.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/53.f632d40e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/54.66b4faf7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/55.812d34b1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/56.de2bcaa0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/57.3d8195e2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/58.c1357c02.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/59.850b1804.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/6.6d538040.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/60.ae85572a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/61.c0e66493.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/62.496cb425.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/63.fde50bb7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/64.4c5a0b18.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/65.d2868d7f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/66.ffdb8018.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/67.5a846e52.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/68.b2543572.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/69.3731d434.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/70.10578e04.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/71.91daa253.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/72.a1b71064.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/73.21c88d21.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/74.a9bade12.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/75.9fbf87e6.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/76.3c13db11.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/77.e613c0c4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/78.979d0967.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/79.81531d4e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/80.fac1e4ec.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/81.d38237f1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/82.2e54be5f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/83.a294601a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/84.c7bfa583.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/85.5ccb83cc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/86.c0dbe34e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/87.f1c77aa7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/88.ae27e2c1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/89.59ac7598.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/90.199d5318.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/91.bda2c188.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/92.26841bca.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/93.9d2fed14.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/94.40cbd70a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/95.7d3a3ccb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/96.cfba2cfa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/97.f082206c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/98.1600479c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/99.e01ab5f5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/vendors~search-page.14d8da50.js">
    <link rel="stylesheet" href="static/css/0.styles.8c5eb347.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index24.html" class="home-link router-link-active"><img src="static/picture/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Меню документации" class="dropdown-title"><span class="title">Документация</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Руководство
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Рекомендации
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Книга рецептов
</a></li><li class="dropdown-item"><!----> <a href="markdown3.html" class="nav-link">
  Примеры
</a></li><li class="dropdown-item"><!----> <a href="writing-guide3.html" class="nav-link">
  Внести свой вклад
</a></li><li class="dropdown-item"><!----> <a href="introduction9.html" class="nav-link">
  Руководство по миграции
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  Справочник API
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Экосистема" class="dropdown-title"><span class="title">Экосистема</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Сообщество
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Команда
</a></li><li class="dropdown-subitem"><a href="partners4.html" class="nav-link">
  Партнёры
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Присоединяйтесь к сообществу Vue.js!
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Темы
</a></li></ul></li><li class="dropdown-item"><h4>
          Официальные проекты
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index7.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index8.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Еженедельные новости
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index10.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Блог
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Поддержать Vue" class="dropdown-title"><span class="title">Поддержать Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Однократное пожертвование
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Регулярные пожертвования
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Магазин футболок
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Переводы" class="dropdown-title"><span class="title">Переводы</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index12.html" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index.html" target="_blank" class="nav-link external">
  中文
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index13.html" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index14.html" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="translations2.html#community-translations" class="nav-link">
  Другие переводы
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Меню документации" class="dropdown-title"><span class="title">Документация</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Руководство
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Рекомендации
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Книга рецептов
</a></li><li class="dropdown-item"><!----> <a href="markdown3.html" class="nav-link">
  Примеры
</a></li><li class="dropdown-item"><!----> <a href="writing-guide3.html" class="nav-link">
  Внести свой вклад
</a></li><li class="dropdown-item"><!----> <a href="introduction9.html" class="nav-link">
  Руководство по миграции
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  Справочник API
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Экосистема" class="dropdown-title"><span class="title">Экосистема</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Сообщество
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Команда
</a></li><li class="dropdown-subitem"><a href="partners4.html" class="nav-link">
  Партнёры
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Присоединяйтесь к сообществу Vue.js!
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Темы
</a></li></ul></li><li class="dropdown-item"><h4>
          Официальные проекты
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index7.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index8.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Еженедельные новости
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index10.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Блог
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Поддержать Vue" class="dropdown-title"><span class="title">Поддержать Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Однократное пожертвование
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Регулярные пожертвования
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Магазин футболок
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Переводы" class="dropdown-title"><span class="title">Переводы</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index12.html" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index.html" target="_blank" class="nav-link external">
  中文
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index13.html" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index14.html" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="translations2.html#community-translations" class="nav-link">
  Другие переводы
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Основы</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Установка</a></li><li><a href="" aria-current="page" class="active sidebar-link">Введение</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#что-такое-vue-js" class="sidebar-link">Что такое Vue.js?</a></li><li class="sidebar-sub-header"><a href="#начало-работы" class="sidebar-link">Начало работы</a></li><li class="sidebar-sub-header"><a href="#декларативная-отрисовка" class="sidebar-link">Декларативная отрисовка</a></li><li class="sidebar-sub-header"><a href="#работа-с-пользовательским-вводом" class="sidebar-link">Работа с пользовательским вводом</a></li><li class="sidebar-sub-header"><a href="#условия-и-циклы" class="sidebar-link">Условия и циклы</a></li><li class="sidebar-sub-header"><a href="#композиция-приложения-из-компонентов" class="sidebar-link">Композиция приложения из компонентов</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#отношение-к-пользовательским-элементам" class="sidebar-link">Отношение к пользовательским элементам</a></li></ul></li><li class="sidebar-sub-header"><a href="#готовы-к-большему" class="sidebar-link">Готовы к большему?</a></li></ul></li><li><a href="javascript:;" class="sidebar-link">Экземпляры приложения &amp; компонента</a></li><li><a href="javascript:;" class="sidebar-link">Синтаксис шаблонов</a></li><li><a href="javascript:;" class="sidebar-link">Свойства data и методы</a></li><li><a href="javascript:;" class="sidebar-link">Вычисляемые свойства и наблюдатели</a></li><li><a href="javascript:;" class="sidebar-link">Работа с классами и стилями</a></li><li><a href="javascript:;" class="sidebar-link">Условная отрисовка</a></li><li><a href="javascript:;" class="sidebar-link">Отрисовка списков</a></li><li><a href="javascript:;" class="sidebar-link">Обработка событий</a></li><li><a href="javascript:;" class="sidebar-link">Работа с формами</a></li><li><a href="javascript:;" class="sidebar-link">Основы компонентов</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Продвинутые компоненты</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Регистрация компонентов</a></li><li><a href="javascript:;" class="sidebar-link">Входные параметры</a></li><li><a href="javascript:;" class="sidebar-link">Передача обычных атрибутов</a></li><li><a href="javascript:;" class="sidebar-link">Пользовательские события</a></li><li><a href="javascript:;" class="sidebar-link">Слоты</a></li><li><a href="javascript:;" class="sidebar-link">Provide / inject</a></li><li><a href="javascript:;" class="sidebar-link">Динамические и асинхронные компоненты</a></li><li><a href="javascript:;" class="sidebar-link">Ссылки на элементы в шаблоне</a></li><li><a href="javascript:;" class="sidebar-link">Обработка крайних случаев</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Переходы и анимации</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Обзор возможностей</a></li><li><a href="javascript:;" class="sidebar-link">Анимация появления и исчезновения элемента</a></li><li><a href="javascript:;" class="sidebar-link">Анимация списков</a></li><li><a href="javascript:;" class="sidebar-link">Анимация переходов между состояниями</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Переиспользование и композиция</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Composition API</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Введение</a></li><li><a href="javascript:;" class="sidebar-link">Функция setup</a></li><li><a href="javascript:;" class="sidebar-link">Хуки жизненного цикла</a></li><li><a href="javascript:;" class="sidebar-link">Provide / Inject</a></li><li><a href="javascript:;" class="sidebar-link">Ссылки на элементы шаблона</a></li></ul></section></li><li><a href="javascript:;" class="sidebar-link">Примеси</a></li><li><a href="javascript:;" class="sidebar-link">Пользовательские директивы</a></li><li><a href="javascript:;" class="sidebar-link">Телепорты</a></li><li><a href="javascript:;" class="sidebar-link">Render-функции</a></li><li><a href="javascript:;" class="sidebar-link">Плагины</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Продвинутые руководства</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Vue и веб-компоненты</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Реактивность</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="javascript:;" class="sidebar-link">Механизмы отрисовки и оптимизации</a></li><li><a href="javascript:;" class="sidebar-link">Особенности отслеживания изменений во Vue 2</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Инструментарий</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Однофайловые компоненты</a></li><li><a href="javascript:;" class="sidebar-link">Тестирование</a></li><li><a href="javascript:;" class="sidebar-link">Поддержка TypeScript</a></li><li><a href="javascript:;" class="sidebar-link">Мобильные приложения</a></li><li><a href="javascript:;" class="sidebar-link">Публикация на production</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Масштабирование</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Роутинг</a></li><li><a href="javascript:;" class="sidebar-link">Управление состоянием приложения</a></li><li><a href="javascript:;" class="sidebar-link">Отрисовка на стороне сервера</a></li><li><a href="javascript:;" class="sidebar-link">Безопасность</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Доступность</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Основы</a></li><li><a href="javascript:;" class="sidebar-link">Семантика</a></li><li><a href="javascript:;" class="sidebar-link">Стандарты</a></li><li><a href="javascript:;" class="sidebar-link">Ресурсы</a></li></ul></section></li></ul> </aside> <main class="page"><div class="carbon-ads"></div>  <div class="theme-default-content content__default"><h1 id="введение"><a href="#введение" class="header-anchor">#</a> Введение</h1> <div class="custom-block tip"><p class="custom-block-title">Примечание</p> <p>Уже изучили Vue 2 и хотите узнать что нового во Vue 3? Посмотрите <a href="introduction9.html">руководство по миграции</a>!</p></div> <h2 id="что-такое-vue-js"><a href="#что-такое-vue-js" class="header-anchor">#</a> Что такое Vue.js?</h2> <p>Vue (произносится /vjuː/, примерно как <strong>view</strong>) — <strong>прогрессивный фреймворк</strong> для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создавался пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с <a href="javascript:;">современными инструментами</a> и <a href="javascript:;" target="_blank" rel="noopener noreferrer">дополнительными библиотеками<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>Если хотите узнать о Vue больше, прежде чем начать — <a id="modal-player" href="#" class="vuemastery-trigger">посмотрите видео</a> с рассказом об основных принципах работы на небольшом примере проекта.</p> <section class="video-lesson"><a href="javascript:;" target="_blank" rel="sponsored noopener" title="Посмотрите бесплатный видео-курс на Vue Mastery (на английском)">Посмотрите бесплатный видео-курс на Vue Mastery</a></section> <div class="overlay" style="display:none;"><div class="modal"><div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="javascript:;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" allow="autoplay" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"></iframe></div> <p class="modal-text">
      Video by
      <a href="javascript:;" target="_blank" rel="sponsored noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Mastery’s free
      <a href="javascript:;" target="_blank" rel="sponsored noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
    </p></div></div> <h2 id="начало-работы"><a href="#начало-работы" class="header-anchor">#</a> Начало работы</h2> <p><a href="javascript:;" class="nav-link primary" data-v-04ba8586="">
    Установка
  </a></p> <div class="custom-block tip"><p class="custom-block-title">Совет</p> <p>В руководстве предполагаются знания HTML, CSS и JavaScript на среднем уровне. Для новичков во фронтенд-разработке сразу начинать изучение с фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.</p></div> <p>Самый простой способ попробовать Vue.js — <a href="javascript:;" target="_blank" rel="noopener noreferrer">пример Hello World<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Открывайте его в соседней вкладке и практикуйтесь, изменяя по ходу изучения руководства.</p> <p>На странице <a href="javascript:;">установки</a> перечислены несколько вариантов как устанавливать Vue. Примечание: начинающим программистам <strong>не рекомендуем стартовать с <code>vue-cli</code></strong>, особенно если ещё не знакомы с инструментами сборки на основе Node.js.</p> <h2 id="декларативная-отрисовка"><a href="#декларативная-отрисовка" class="header-anchor">#</a> Декларативная отрисовка</h2> <p>В ядре Vue.js находится система, позволяющая декларативно отрисовывать данные в DOM с помощью простого синтаксиса шаблонов:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Счётчик: {{ counter }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      counter<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#counter'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>Вот и первое Vue-приложение! Хоть и выглядит как простая отрисовка строкового шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь <strong>реактивно</strong> связаны. Как в этом убедиться? Посмотрите на пример ниже, где свойство <code>counter</code> увеличивается каждую секунду и увидите, как изменяется DOM:</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      counter<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>counter<span class="token operator">++</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="demo" data-v-276250da=""><p data-v-276250da="">Counter: 0</p> <button data-v-276250da="">Stop timer</button></div> <p>Кроме интерполяции текста также можно связывать данные с атрибутами элементов:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bind-attribute<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    Наведи на меня курсор на пару секунд, чтобы
    увидеть динамически связанное значение title!
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> AttributeBinding <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Страница загружена '</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>AttributeBinding<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#bind-attribute'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="KKpRVvJ" data-pen-title="Attribute dynamic binding" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Attribute dynamic binding</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>Здесь повстречались с чем-то новым. Атрибут <code>v-bind</code> называется <strong>директивой</strong>. Директивы именуются с префикса <code>v-</code>, который обозначает что это специальные атрибуты Vue, и как уже можно догадаться, они добавляют особое реактивное поведение отрисованному DOM. В примере выше директива говорит «<em>сохраняй значение <code>title</code> этого элемента актуальным при изменении свойства <code>message</code> в текущем активном экземпляре</em>».</p> <h2 id="работа-с-пользовательским-вводом"><a href="#работа-с-пользовательским-вводом" class="header-anchor">#</a> Работа с пользовательским вводом</h2> <p>Чтобы позволить пользователям взаимодействовать с приложением, можно использовать директиву <code>v-on</code> для обработчиков событий, которые будут вызывать методы экземпляра:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>event-handling<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Перевернуть сообщение<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> EventHandling <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Привет, Vue.js!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">reverseMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message
        <span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>EventHandling<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#event-handling'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="dyoeGjW" data-pen-title="Event handling" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Event handling</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>Обратите внимание, в методе не трогаем DOM и обновляем только состояние приложения — всеми манипуляциями с DOM занимается Vue, а в коде фокусируемся на логике работы.</p> <p>Vue также предоставляет директиву <code>v-model</code>, которая реализует двустороннюю привязку между элементом формы и состоянием приложения:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>two-way-binding<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TwoWayBinding <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Привет, Vue!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>TwoWayBinding<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#two-way-binding'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="poJVgZm" data-pen-title="Two-way binding" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Two-way binding</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <h2 id="условия-и-циклы"><a href="#условия-и-циклы" class="header-anchor">#</a> Условия и циклы</h2> <p>Управлять присутствием элемента в DOM тоже просто:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>conditional-rendering<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>seen<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Сейчас меня видно<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> ConditionalRendering <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      seen<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>ConditionalRendering<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#conditional-rendering'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>Пример выше демонстрирует возможность связывания данных не только с текстом и атрибутами, но и со <strong>структурой</strong> DOM. Кроме того, Vue имеет мощную систему анимаций, которая может автоматически применять <a href="javascript:;">эффекты переходов</a> при добавлении, обновлении или удалении элементов.</p> <p>В примере ниже можно изменять значение <code>seen</code> с <code>true</code> на <code>false</code> чтобы увидеть эффект:</p> <p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="js,result" data-user="Vue" data-slug-hash="oNXdbpB" data-pen-title="Conditional rendering" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Conditional rendering</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>Есть и некоторое количество других директив, каждая из которых обладает своей особой функциональностью. Например, директиву <code>v-for</code> можно использовать для отображения списка элементов, используя данные из массива:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-rendering<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo in todos<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{ todo.text }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> ListRendering <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      todos<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Learn JavaScript'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Learn Vue'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Build something awesome'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>ListRendering<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#list-rendering'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="mdJLVXq" data-pen-title="List rendering" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">List rendering</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <h2 id="композиция-приложения-из-компонентов"><a href="#композиция-приложения-из-компонентов" class="header-anchor">#</a> Композиция приложения из компонентов</h2> <p>Компонентная система является ещё одной важной концепцией во Vue, потому что это абстракция, которая позволяет создавать большие приложения, состоящие из небольших, автономных и часто переиспользуемых компонентов. Если задуматься, то почти любой тип интерфейса приложения можно абстрактно представить в виде дерева компонентов:</p> <p><img src="static/picture/components.png" alt="Дерево компонентов"></p> <p>Компонент во Vue — по сути экземпляр с предустановленными опциями. Его регистрация также проста: нужно создать объект компонента, как это уже делали с объектом <code>app</code>, и указать его в родительской опции <code>components</code>:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoItem <span class="token operator">=</span> <span class="token punctuation">{</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li&gt;Это одна из задач&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// Создаём Vue-приложение</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    TodoItem <span class="token comment">// Регистрируем новый компонент</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span> <span class="token comment">// Остальные свойства для компонента</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// Монтируем приложение Vue</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>После этого можно использовать его в шаблоне другого компонента:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- Создание экземпляра компонента todo-item --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-item</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Пока что во всех элементах списка будет один и тот же текст, что не очень-то интересно. Должна быть возможность передавать данные в дочерние компоненты из родительской области видимости. Доработаем компонент, чтобы он принимал <a href="javascript:;">входной параметр</a>:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoItem <span class="token operator">=</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'todo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token interpolation"><span class="token punctuation">{{</span><span class="token inline-js language-js"> todo<span class="token punctuation">.</span>text </span><span class="token punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Теперь можно передавать свой текст для каждого из компонентов с помощью <code>v-bind</code>:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo-list-app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--
      Теперь можно передавать каждому компоненту todo-item объект с информацией
      о задаче, который может динамически изменяться. Также каждому компоненту
      определяем &quot;key&quot;, назначение которого разберём далее в руководстве.
    --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-item</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in groceryList<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name"><span class="token namespace">v-bind:</span>todo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoItem <span class="token operator">=</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'todo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token interpolation"><span class="token punctuation">{{</span><span class="token inline-js language-js"> todo<span class="token punctuation">.</span>text </span><span class="token punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> TodoList <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      groceryList<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Vegetables'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Cheese'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Whatever else humans are supposed to eat'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    TodoItem
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>TodoList<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#todo-list-app'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="VwLxeEz" data-pen-title="Intro-Components-1" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Intro-Components-1</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>Конечно, это несколько надуманный пример, но приложение удалось разделить на два блока поменьше. Дочерний компонент достаточно хорошо изолирован от родительского интерфейсом входных параметров. Теперь можно дорабатывать компонент <code>&lt;todo-item&gt;</code>, изменяя его шаблон и логику и не затрагивать работу родительского приложения.</p> <p>В больших приложениях разделение на компоненты становится жизненной необходимостью для сохранения управляемости разработки. Гораздо подробнее с компонентами продолжим разбираться <a href="javascript:;">далее в руководстве</a>, но и сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-nav</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-nav</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-sidebar</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-sidebar</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-content</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-content</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="отношение-к-пользовательским-элементам"><a href="#отношение-к-пользовательским-элементам" class="header-anchor">#</a> Отношение к пользовательским элементам</h3> <p>Можно заметить, что компоненты Vue похожи на <strong>пользовательские элементы</strong>, являющиеся частью <a href="javascript:;" target="_blank" rel="noopener noreferrer">спецификации веб-компонентов<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Некоторые элементы дизайна компонентов Vue (например, API слотов) действительно разрабатывались под влиянием этой спецификации ещё до того, как она была реализована в браузерах.</p> <p>Но главное отличие в том, что компонентная модель Vue разработана как часть целостного фреймворка, предоставляющего множество дополнительных возможностей, необходимых при создании нетривиальных приложений, например, реактивный шаблонизатор и управление состоянием — оба этих аспекта не покрываются спецификацией.</p> <p>Vue также предоставляет отличную поддержку как для использования, так и для создания пользовательских элементов. Более подробную информацию можно найти в разделе <a href="javascript:;">Vue и веб-компоненты</a>.</p> <h2 id="готовы-к-большему"><a href="#готовы-к-большему" class="header-anchor">#</a> Готовы к большему?</h2> <p>Пока что лишь вкратце познакомились с основными функциями ядра Vue.js — в следующих разделах руководства будем разбирать подробнее эти и другие интересные возможности, поэтому не забудьте прочитать его целиком!</p></div> <footer class="page-edit" data-v-fbe2b3da=""><div class="container" data-v-fbe2b3da=""><p data-v-fbe2b3da="">
      Опубликовано на
      <a href="javascript:;" data-v-fbe2b3da="">Netlify</a>.
      <span class="edit-link" data-v-fbe2b3da="">
        Нашли ошибку?
        <a href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-fbe2b3da="">
          Исправьте эту страницу на GitHub
          <span data-v-fbe2b3da=""><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></span> <br data-v-fbe2b3da=""> <span class="prefix" data-v-fbe2b3da="">Последнее обновление страницы:</span> <span class="time" data-v-fbe2b3da="">28 дней назад</span></p></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="javascript:;" class="prev">Установка</a></span> <span class="next"><a href="javascript:;">Экземпляры приложения &amp; компонента</a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.643be286.js" defer=""></script><script src="static/js/9.270210be.js" defer=""></script><script src="static/js/263.487b0881.js" defer=""></script><script src="static/js/22.f42d5bc7.js" defer=""></script><script src="static/js/23.3d2d7576.js" defer=""></script><script src="static/js/13.5a494ddf.js" defer=""></script><script src="static/js/17.bd0eb4b2.js" defer=""></script><script src="static/js/16.7677328c.js" defer=""></script><script src="static/js/20.aee666d2.js" defer=""></script>
  </body>
</html>
